<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="shortcut icon" href="<%=basePath %>/static/css/logo.png">
    <link rel="stylesheet" href="<%=basePath %>/static/css/iconfont.css">
    <link rel="stylesheet" href="<%=basePath %>/static/css/global.css">
    <link rel="stylesheet" href="<%=basePath %>/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="<%=basePath %>/static/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="<%=basePath %>/static/css/swiper.min.css">
    <link rel="stylesheet" href="<%=basePath %>/static/css/styles.css">
    <link rel="stylesheet" href="<%=basePath %>/static2/assets/layer/skin/layer.css">
    <script src="<%=basePath %>/static/js/jquery.1.12.4.min.js" charset="UTF-8"></script>
    <script src="<%=basePath %>/static/js/bootstrap.min.js" charset="UTF-8"></script>
    <script src="<%=basePath %>/static/js/swiper.min.js" charset="UTF-8"></script>
    <script src="<%=basePath %>/static/js/global.js" charset="UTF-8"></script>
    <script src="<%=basePath %>/static/js/jquery.DJMask.2.1.1.js" charset="UTF-8"></script>
    <script src="<%=basePath %>/static2/assets/layer/layer.js" charset="UTF-8"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            var userid = '<%=session.getAttribute("userid")%>';
        });

        function member_del(obj, id) {
            layer.confirm('确认要删除吗？', function (index) {
                $.ajax({
                    type: "GET",
                    url: "../web/qxorder",
                    data: {orderid: id},
                    //dataType:"json",
                    success: function (data) {
                    }
                });
                $(obj).parents("tr").remove();
                layer.msg('已删除!', {icon: 1, time: 1000});
            });
        }

        function openadd(orderId) {
            alert(orderID);
            layer.open({
                type: 2,
                skin: 'layui-layer-demo', //样式类名
                title: '库存修改',
                closeBtn: 0, //不显示关闭按钮
                anim: 2,
                area: ['500px', '300px'],
                shadeClose: true, //开启遮罩关闭
                content: '../web/getordersDetail?orderId=' + orderId
            });
        }
    </script>
    <title>卓越图书</title>
    <base href="<%=basePath%>"/>
</head>
<body>
<!-- 顶部tab -->
<div class="tab-header">
    <div class="inner">
        <div class="pull-left">
            <div class="pull-left">嗨，欢迎来到<span class="cr">卓越图书网</span>
                <span id="xianshi">尊敬的${sessionScope.username}</span>
            </div>
        </div>
        <div class="pull-right">
            <a href="udai_welcome.jsp">个人中心</a>
            <a href="udai_order.jsp">我的订单</a>
        </div>
    </div>
</div>
<!-- 顶部标题 -->
<div class="bgf5 clearfix">
    <div class="top-user">
        <div class="inner">
            <a class="logo" href="<%=basePath %>jsp/homePage.jsp"><img src="<%=basePath %>/static/css/logo.png"
                                                                       alt="zlBOOK" class="cover"></a>
            <div class="title">个人中心</div>
        </div>
    </div>
</div>
<div class="content clearfix bgf5">
    <section class="user-center inner clearfix">
        <div class="pull-left bgf">
            <a class="title">欢迎使用</a>
            <dl class="user-center__nav">
                <dt>帐户信息</dt>
                <a href="udai_userInfo.jsp">
                    <dd>个人资料</dd>
                </a>
                <a href="receive/selectArea">
                    <dd>收货地址</dd>
                </a>
                <a href="udai_pwd_modify.jsp">
                    <dd>修改登录密码</dd>
                </a>
            </dl>
            <dl class="user-center__nav">
                <dt>订单中心</dt>
                <a href="<%=basePath %>web/getorders">
                    <dd>我的订单</dd>
                </a>
            </dl>

        </div>
        <div class="user-content__box clearfix bgf">
            <div class="title">订单中心-我的订单</div>
            <div class="order-list__box bgf">
                <div class="order-panel">
                    <ul class="nav user-nav__title" role="tablist">
                        <li role="presentation" class="nav-item active"><a href="#all" aria-controls="all" role="tab"
                                                                           data-toggle="tab">所有订单</a></li>
                        <li role="presentation" class="nav-item "><a href="#pay" aria-controls="pay" role="tab"
                                                                     data-toggle="tab">待付款 <span class="cr">0</span></a>
                        </li>
                        <li role="presentation" class="nav-item "><a href="#emit" aria-controls="emit" role="tab"
                                                                     data-toggle="tab">待发货 <span class="cr">0</span></a>
                        </li>
                        <li role="presentation" class="nav-item "><a href="#take" aria-controls="take" role="tab"
                                                                     data-toggle="tab">待收货 <span class="cr">0</span></a>
                        </li>
                        <li role="presentation" class="nav-item "><a href="#eval" aria-controls="eval" role="tab"
                                                                     data-toggle="tab">待评价 <span class="cr">0</span></a>
                        </li>
                    </ul>

                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane fade in active" id="all">
                            <table class="table text-center">
                                <tr>
                                    <th width="380">商品信息</th>

                                    <th width="120">实付款</th>
                                    <th width="120">交易状态</th>
                                    <th width="120">交易操作</th>
                                </tr>
                                <c:forEach items="${orderList}" var="order">
                                    <tr class="order-item" id="">
                                        <td>
                                            <label>
                                                <div class="num">
                                                    <!-- <input type="checkbox"> -->
                                                    生成时间：${order.time}订单号: ${order.orderids }
                                                </div>
                                                <div class="card">

                                                    <div class="name ep2"></div>
                                                </div>
                                            </label>
                                        </td>

                                        <td>${order.shifukuan }<br><span class="fz12 c6 text-nowrap">(含运费: ¥0.00)</span>
                                        </td>
                                        <td class="state">
                                            <a class="but c6">${order.zhuangtai }</a>
                                        </td>
                                        <td class="order">
                                            <span onclick="openadd('${order.orderids}')">查看订单</span>
                                            <a href="" class="but but-primary">付款</a>
                                            <!-- <a href="" class="but but-link">评价</a> -->
                                            <button href="" onclick="member_del(this,'${order.orderids }')" id="qxorder"
                                                    class="but c3">取消订单
                                            </button>
                                            <a href="" class="but but-primary">签收</a>
                                        </td>
                                    </tr>
                                </c:forEach>

                            </table>
                            <div class="page text-right clearfix" style="margin-top: 40px">
                                <a class="disabled">上一页</a>
                                <a class="select">1</a>
                                <a href="">2</a>
                                <a href="">3</a>
                                <a class="" href="">下一页</a>
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="pay">
                            <table class="table text-center">
                                <tr>
                                    <th width="380">商品信息</th>
                                    <th width="85">单价</th>
                                    <th width="85">数量</th>
                                    <th width="120">实付款</th>
                                    <th width="120">交易状态</th>
                                    <th width="120">交易操作</th>
                                </tr>
                                <tr class="order-empty">
                                    <td colspan='6'>
                                        <div class="empty-msg">最近没有任何订单，家里好像缺了点什么！<br><a href="item_category.html">要不瞧瞧去？</a>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="emit">
                            <table class="table text-center">
                                <tr>
                                    <th width="380">商品信息</th>
                                    <th width="85">单价</th>
                                    <th width="85">数量</th>
                                    <th width="120">实付款</th>
                                    <th width="120">交易状态</th>
                                    <th width="120">交易操作</th>
                                </tr>
                                <tr class="order-item">
                                    <td>
                                        <label>
                                            <a href="udai_order_detail.html" class="num">
                                                2017-03-30 订单号: 2669901385864042
                                            </a>
                                            <div class="card">
                                                <div class="img"><img src="images/temp/item-img_1.jpg" alt=""
                                                                      class="cover"></div>
                                                <div class="name ep2">纯色圆领短袖T恤活动衫弹力柔软纯色圆领短袖T恤</div>
                                                <div class="format">颜色分类：深棕色 尺码：均码</div>
                                                <div class="favour">使用优惠券：优惠¥2.00</div>
                                            </div>
                                        </label>
                                    </td>
                                    <td>￥100</td>
                                    <td>1</td>
                                    <td>￥1000<br><span class="fz12 c6 text-nowrap">(含运费: ¥0.00)</span></td>
                                    <td class="state">
                                        <a class="but c6">等待发货</a>
                                        <a href="udai_order_detail.html" class="but c9">订单详情</a>
                                    </td>
                                    <td class="order">
                                        <div class="del"><span class="glyphicon glyphicon-trash"
                                                               aria-hidden="true"></span></div>
                                        <a href="udai_order_receipted.html" class="but but-primary">确认收货</a>
                                        <a href="udai_apply_return.html" class="but c3">退款/退货</a>
                                    </td>
                                </tr>
                                <tr class="order-item">
                                    <td>
                                        <label>
                                            <a href="udai_order_detail.html" class="num">
                                                2017-03-30 订单号: 2669901385864042
                                            </a>
                                            <div class="card">
                                                <div class="img"><img src="images/temp/item-img_1.jpg" alt=""
                                                                      class="cover"></div>
                                                <div class="name ep2">纯色圆领短袖T恤活动衫弹力柔软纯色圆领短袖T恤</div>
                                                <div class="format">颜色分类：深棕色 尺码：均码</div>
                                                <div class="favour">使用优惠券：优惠¥2.00</div>
                                            </div>
                                        </label>
                                    </td>
                                    <td>￥100</td>
                                    <td>1</td>
                                    <td>￥1000<br><span class="fz12 c6 text-nowrap">(含运费: ¥0.00)</span></td>
                                    <td class="state">
                                        <a class="but c6">等待发货</a>
                                        <a href="udai_order_detail.html" class="but c9">订单详情</a>
                                    </td>
                                    <td class="order">
                                        <div class="del"><span class="glyphicon glyphicon-trash"
                                                               aria-hidden="true"></span></div>
                                        <a href="udai_order_receipted.html" class="but but-primary">确认收货</a>
                                        <a href="udai_apply_return.html" class="but c3">退款/退货</a>
                                    </td>
                                </tr>
                                <tr class="order-item">
                                    <td>
                                        <label>
                                            <a href="udai_order_detail.html" class="num">
                                                2017-03-30 订单号: 2669901385864042
                                            </a>
                                            <div class="card">
                                                <div class="img"><img src="images/temp/item-img_1.jpg" alt=""
                                                                      class="cover"></div>
                                                <div class="name ep2">纯色圆领短袖T恤活动衫弹力柔软纯色圆领短袖T恤</div>
                                                <div class="format">颜色分类：深棕色 尺码：均码</div>
                                                <div class="favour">使用优惠券：优惠¥2.00</div>
                                            </div>
                                        </label>
                                    </td>
                                    <td>￥100</td>
                                    <td>1</td>
                                    <td>￥1000<br><span class="fz12 c6 text-nowrap">(含运费: ¥0.00)</span></td>
                                    <td class="state">
                                        <a class="but c6">等待发货</a>
                                        <a href="udai_order_detail.html" class="but c9">订单详情</a>
                                    </td>
                                    <td class="order">
                                        <div class="del"><span class="glyphicon glyphicon-trash"
                                                               aria-hidden="true"></span></div>
                                        <a href="udai_order_receipted.html" class="but but-primary">确认收货</a>
                                        <a href="udai_apply_return.html" class="but c3">退款/退货</a>
                                    </td>
                                </tr>
                            </table>
                            <div class="page text-right clearfix" style="margin-top: 40px">
                                <a class="disabled">上一页</a>
                                <a class="select">1</a>
                                <a class="disabled">下一页</a>
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="take">
                            <table class="table text-center">
                                <tr>
                                    <th width="380">商品信息</th>
                                    <th width="85">单价</th>
                                    <th width="85">数量</th>
                                    <th width="120">实付款</th>
                                    <th width="120">交易状态</th>
                                    <th width="120">交易操作</th>
                                </tr>
                                <tr class="order-empty">
                                    <td colspan='6'>
                                        <div class="empty-msg">最近没有任何订单，家里好像缺了点什么！<br><a href="item_category.html">要不瞧瞧去？</a>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="eval">
                            <table class="table text-center">
                                <tr>
                                    <th width="380">商品信息</th>
                                    <th width="85">单价</th>
                                    <th width="85">数量</th>
                                    <th width="120">实付款</th>
                                    <th width="120">交易状态</th>
                                    <th width="120">交易操作</th>
                                </tr>
                                <tr class="order-item">
                                    <td>
                                        <label>
                                            <a href="udai_order_detail.html" class="num">
                                                2017-03-30 订单号: 2669901385864042
                                            </a>
                                            <div class="card">
                                                <div class="img"><img src="images/temp/item-img_1.jpg" alt=""
                                                                      class="cover"></div>
                                                <div class="name ep2">纯色圆领短袖T恤活动衫弹力柔软纯色圆领短袖T恤</div>
                                                <div class="format">颜色分类：深棕色 尺码：均码</div>
                                                <div class="favour">使用优惠券：优惠¥2.00</div>
                                            </div>
                                        </label>
                                    </td>
                                    <td>￥100</td>
                                    <td>1</td>
                                    <td>￥1000<br><span class="fz12 c6 text-nowrap">(含运费: ¥0.00)</span></td>
                                    <td class="state">
                                        <a class="but c6">交易成功</a>
                                        <a href="udai_mail_query.html" class="but cr">查看物流</a>
                                        <a href="udai_order_detail.html" class="but c9">订单详情</a>
                                    </td>
                                    <td class="order">
                                        <div class="del"><span class="glyphicon glyphicon-trash"
                                                               aria-hidden="true"></span></div>
                                        <a href="" class="but but-link">评价</a>
                                        <a href="" class="but c3">取消订单</a>
                                    </td>
                                </tr>
                                <tr class="order-item">
                                    <td>
                                        <label>
                                            <a href="udai_order_detail.html" class="num">
                                                2017-03-30 订单号: 2669901385864042
                                            </a>
                                            <div class="card">
                                                <div class="img"><img src="images/temp/item-img_1.jpg" alt=""
                                                                      class="cover"></div>
                                                <div class="name ep2">纯色圆领短袖T恤活动衫弹力柔软纯色圆领短袖T恤</div>
                                                <div class="format">颜色分类：深棕色 尺码：均码</div>
                                                <div class="favour">使用优惠券：优惠¥2.00</div>
                                            </div>
                                        </label>
                                    </td>
                                    <td>￥100</td>
                                    <td>1</td>
                                    <td>￥1000<br><span class="fz12 c6 text-nowrap">(含运费: ¥0.00)</span></td>
                                    <td class="state">
                                        <a class="but c6">交易成功</a>
                                        <a href="udai_mail_query.html" class="but cr">查看物流</a>
                                        <a href="udai_order_detail.html" class="but c9">订单详情</a>
                                    </td>
                                    <td class="order">
                                        <div class="del"><span class="glyphicon glyphicon-trash"
                                                               aria-hidden="true"></span></div>
                                        <a href="" class="but but-link">评价</a>
                                        <a href="" class="but c3">取消订单</a>
                                    </td>
                                </tr>
                                <tr class="order-item">
                                    <td>
                                        <label>
                                            <a href="udai_order_detail.html" class="num">
                                                2017-03-30 订单号: 2669901385864042
                                            </a>
                                            <div class="card">
                                                <div class="img"><img src="images/temp/item-img_1.jpg" alt=""
                                                                      class="cover"></div>
                                                <div class="name ep2">纯色圆领短袖T恤活动衫弹力柔软纯色圆领短袖T恤</div>
                                                <div class="format">颜色分类：深棕色 尺码：均码</div>
                                                <div class="favour">使用优惠券：优惠¥2.00</div>
                                            </div>
                                        </label>
                                    </td>
                                    <td>￥100</td>
                                    <td>1</td>
                                    <td>￥1000<br><span class="fz12 c6 text-nowrap">(含运费: ¥0.00)</span></td>
                                    <td class="state">
                                        <a class="but c6">交易成功</a>
                                        <a href="udai_mail_query.html" class="but cr">查看物流</a>
                                        <a href="udai_order_detail.html" class="but c9">订单详情</a>
                                    </td>
                                    <td class="order">
                                        <div class="del"><span class="glyphicon glyphicon-trash"
                                                               aria-hidden="true"></span></div>
                                        <a href="" class="but but-link">评价</a>
                                        <a href="" class="but c3">取消订单</a>
                                    </td>
                                </tr>
                            </table>
                            <div class="page text-right clearfix" style="margin-top: 40px">
                                <a class="disabled">上一页</a>
                                <a class="select">1</a>
                                <a class="disabled">下一页</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>
</div>
<!-- 右侧菜单 -->
<div class="right-nav">
    <ul class="r-with-gotop">
        <li class="r-toolbar-item">
            <a href="udai_welcome.jsp" class="r-item-hd">
                <i class="iconfont icon-user" data-badge="0"></i>
                <div class="r-tip__box"><span class="r-tip-text">用户中心</span></div>
            </a>
        </li>
        <li class="r-toolbar-item">
            <a href="udai_shopcart.jsp" class="r-item-hd">
                <i class="iconfont icon-cart"></i>
                <div class="r-tip__box"><span class="r-tip-text">购物车</span></div>
            </a>
        </li>
        <li class="r-toolbar-item">
            <a href="" class="r-item-hd">
                <i class="iconfont icon-aixin"></i>
                <div class="r-tip__box"><span class="r-tip-text">我的收藏</span></div>
            </a>
        </li>
        <li class="r-toolbar-item">
            <a href="" class="r-item-hd">
                <i class="iconfont icon-liaotian"></i>
                <div class="r-tip__box"><span class="r-tip-text">联系客服</span></div>
            </a>
        </li>
        <li class="r-toolbar-item">
            <a href="" class="r-item-hd">
                <i class="iconfont icon-liuyan"></i>
                <div class="r-tip__box"><span class="r-tip-text">留言反馈</span></div>
            </a>
        </li>
        <li class="r-toolbar-item to-top">
            <i class="iconfont icon-top"></i>
            <div class="r-tip__box"><span class="r-tip-text">返回顶部</span></div>
        </li>
    </ul>
    <script>
        $(document).ready(function () {
            $('.to-top').toTop({position: false})
        });
    </script>
</div>
<!-- 底部信息 -->
<div class="footer">
    <div class="footer-tags">
        <div class="tags-box inner">
            <div class="tag-div">
                <img src="<%=basePath %>/static/images/icons/footer_1.gif" alt="厂家直供">
            </div>
            <div class="tag-div">
                <img src="<%=basePath %>/static/images/icons/footer_2.gif" alt="一件代发">
            </div>
            <div class="tag-div">
                <img src="<%=basePath %>/static/images/icons/footer_3.gif" alt="美工活动支持">
            </div>
            <div class="tag-div">
                <img src="<%=basePath %>/static/images/icons/footer_4.gif" alt="信誉认证">
            </div>
        </div>
    </div>
    <div class="copy-box clearfix">
        <!-- 版权 -->
        <p class="copyright">
            ©卓越图书网 版权所有，并保留所有权利<br>
            河南省郑州市中原区科学大道100号
        </p>
    </div>
</div>
</body>
</html>